<template>
  <div id="maxcontainer">
    <button @click="fullscreen">全屏</button>
    <div id="main" ref="echartscanview">
      <div id="top">
        <div class="top_left">
          <div class="top_left_top">
            <h4>基本信息</h4>
            <button @click="quitfullscreen" ref="qfulls">退出全屏</button>
          </div>
          <div class="top_left_bottom">
            <h4>放个日历</h4>
          </div>
        </div>
        <div class="top_right">
          <div class="top_right_top">
            <div class="top_right_top_left">
              <div class="top_right_top_left_top">
                <h4>早上好</h4>
              </div>
              <div class="top_right_top_left_bottom">
                <h4>今日天气情况</h4>
                <p>
                  <span>{{weather.city}}&nbsp;</span>
                  <span>{{weather.air_level}}</span>
                </p>
                <p>
                  <span>{{weather.week}}&nbsp;</span>
                  <span>{{weather.win}}&nbsp;</span>
                  <span>{{weather.wea}}</span>
                </p>
              </div>
            </div>
            <div class="top_right_top_right">
                <h4>通知公告</h4>
            </div>
          </div>
          <div class="top_right_bottom">
            <div ref="echartspie1"></div>
            <div>
                <h4>本月工作进度完成情况</h4>
                <ul>
                    <li><span>{{ywc}}</span><span>已完成任务</span></li>
                    <li><span>{{wwc}}</span><span>未完成任务</span></li>
                    <li><span>{{jxz}}</span><span>进行中</span></li>
                </ul>
            </div>
          </div>
        </div>
      </div>
      <div id="bottom">
        <div id="bottom_left"></div>
        <div id="bottom_right"></div>
      </div>
    </div>
  </div>
</template>
<script>
import * as api from "@/api"
import * as echarts from "echarts";
export default {
  data() {
    return {
      renwuARR:[],
      ywc:"",
      wwc:"",
      jxz:"",
      weather:{}
    };
  },
  methods: {
    quitfullscreen(){
      this.$refs.echartscanview.style.position="relative"
      this.$refs.echartscanview.style.height="700px"
      this.$refs.qfulls.style.display="none"
    },
    fullscreen(){//一个奇怪的全屏方法，给父盒子设置窗口定位fixed高度100%上下左右0全覆盖
      this.$refs.echartscanview.style.position="fixed"
      this.$refs.echartscanview.style.left=0
      this.$refs.echartscanview.style.right=0
      this.$refs.echartscanview.style.top=0
      this.$refs.echartscanview.style.bottom=0
      this.$refs.echartscanview.style.height="100%"
      this.$refs.qfulls.style.display="block"
    }
  },
  mounted() {
    this.$refs.qfulls.style.display="none"
    //天气接口一直请求超时
    api.getWeather("","南京")
    .then(res=>{
        console.log(res.data.data);
        if(res.data.message=="获取成功"){
          this.weather = res.data.data[0]
           console.log(this.weather);
        }
    })

    //异步请求填充数据
    api.getTarskData()
    .then(res=>{
      // console.log(res.data);
      this.renwuARR = res.data.data
      this.ywc = res.data.data[0].value
      this.wwc = res.data.data[1].value
      this.jxz = res.data.data[2].value
      // console.log(this.renwuARR);
      let newdata = []
      let newdataobj ={}
      this.renwuARR.forEach(item => {
        newdataobj.value = item.value
        newdataobj.name = item.name
        newdata.push(newdataobj)
        newdataobj ={}
      });
      // console.log(newdata);
      shangyouxia.setOption({
        series:[
          {
            data:newdata
          }
        ]
      })
    })
    //初始化这个元素
    var shangyouxia = echarts.init(this.$refs.echartspie1);
    //根据echarts配置这个元素的setOption
    shangyouxia.setOption({
      title:{
          text:"任务概况"
      },
      tooltip: {
        trigger: "item",
      },
      legend: {
        top: "50%",
        right: 0,
        orient: "vertical",
      },
      series: [
        {
          name: "Access From",
          type: "pie",
          radius: ["40%", "70%"],
          avoidLabelOverlap: false,
          label: {
            show: true,
            position: "center",
          },
          emphasis: {
            label: {
              show: false,
              fontSize: "40",
              fontWeight: "bold",
            },
          },
          labelLine: {
            show: false,
          },
          data: [
            { value: 1, name: "1" },
            { value: 1, name: "1" },
            { value: 1, name: "1" },
          ],
        },
      ],
    });
    // -------------------------------------------------------------------
    var zuoxia = echarts.init(document.getElementById("bottom_left"));
    zuoxia.setOption({
      legend: {
          right:0,
          bottom:10
      },
      xAxis: {
        show:false,
        data: [],
      },
      yAxis: {
          show:false,
          type: 'value'
      },
      series: [
        {
          name: "学习进度",
          type: "line", //bar柱状图 line折线
          data: [],
          smooth: true,
          label:{
              show:true
          }
        },
      ],
    });
    api.lineDataApi()
    .then(res=>{
      // console.log(res.data.data);
      let xdata = []
      let sdata = []
      res.data.data.forEach(item=>{
        xdata.push(item.name)
        sdata.push(item.rate)
      })
      zuoxia.setOption({
        xAxis:{
          data:xdata
        },
        series:[{
          data:sdata
        }]
      })
    })
    //-----------------------------------------------------------
    var youxia = echarts.init(document.getElementById("bottom_right"));
    youxia.setOption({
      tooltip: {
        tarigger: "item",
        formatter: "{b}:{d}%",
      },
      legend: {
        //系列名称
        top: "50%",
        right: 0,
        orient: "vertical",
      },
      series: [
        {
          name: "ff",
          type: "pie",
          radius: ["30%", "70%"], //80% 一个值就是圆饼不需要写成数组
          data: [],
          label: {
            show: true,
            // position:"center"
          },
          labelLine: {
            show: true,
          },
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
            },
          },
        },
      ],
    });
    api.expectDataApi()
    .then(res=>{
      // console.log(res.data.data);
      let sdata = []
      let sdata_item = {}
      res.data.data.map(item=>{
        sdata_item.value = item.rate
        sdata_item.name = item.title
        sdata.push(sdata_item)
        sdata_item = {}
      })
      // console.log(sdata);
      youxia.setOption({
        series:[{
          data:sdata
        }]
      })
    })
  },
};
</script>
<style scoped lang="less">
#maxcontainer{
  height:100%;
}
#main {
  border: 2px blue solid;
  border-radius: 10px;
  height: 700px;
  overflow: hidden;
  background-color:blue;
  padding:5px 5px 10px 5px;
  #top {
    height: 400px;
    display: flex;
    margin-bottom:15px;
    .top_left {
      flex: 2;
      .top_left_top {
        height: 200px;
        border:1px white solid;
        border-radius:5px;
        background-color: white;
        margin-right:5px;
        margin-bottom:5px;
      }
      .top_left_bottom {
        border:1px white solid;
        border-radius:5px;
        background-color: white;
        height: 200px;
        margin-right:5px;
      }
    }
    .top_right {
      flex: 3;
      .top_right_top {
        height: 250px;
        display: flex;
        margin-bottom:15px;
        .top_right_top_left {
          height: 250px;
          flex: 1;
          .top_right_top_left_top {
            height: 125px;
            border:1px white solid;
            border-radius:5px;
            background-color: white;
            margin-bottom:5px;
            margin-right:5px;
          }
          .top_right_top_left_bottom {
            height: 125px;
            border:1px white solid;
            border-radius:5px;
            background-color: white;
            margin-right:5px;
          }
        }
        .top_right_top_right {
          height: 250px;
          border:1px white solid;
          border-radius:5px;
          background-color: white;
          flex: 2;
        }
      }
      .top_right_bottom {
        border:1px white solid;
        border-radius:5px;
        background-color: white;
        height: 150px;
        display: flex;
        div {
          height: 150px;
          flex: 1;
        }
      }
    }
  }
  #bottom {
    height: 300px;
    border:1px white solid;
    border-radius:5px;
    background-color: white;
    display: flex;
    margin-top:20px;
    #bottom_left {
      height: 300px;
      flex: 1;
    }
    #bottom_right {
      height: 300px;
      flex: 1;
    }
  }
}
</style>
